<template>
	<view style="height: 2000rpx;">
		<!--   订单信息        -->
		<view class="dingdan-wai">
			<!-- 订单编号 -->
			<view class="xinxi">
				<view style="
				margin-top: 20rpx;
				font-weight:bold;
				font-size: 35rpx;
				">订单信息</view>
				<view>
					<view style="color: orangered;margin-top: 20rpx;">已取消</view>
				</view>
			</view>
			<!-- 服务内容 -->
			<view style="
			display: flex;
			justify-content: space-between;
			margin: 30rpx;
			">
				<view class="fuwu-3">
					<view>订单号: 1212121122487878</view>
					<view>服务项目: 车辆保养</view>
					<view>服务门店: 大宝车辆维修店</view>
					<view style="">下单时间: 2023-03-12 12:09</view>
					<view style="">预约时间: 2023-03-12 12:09</view>
					<view>车辆: 奔驰FWE4/豫A98FHJ</view>
					<view>备注:</view>
				</view>
			</view>
		</view>
		<!--      订单详情       -->
		<view class="dingDanYangQing" >
			<view style="
			width: 90%;
			height: 70rpx;
			border-bottom: 10rpx solid whitesmoke;
			font-size: 35rpx;
			font-weight:bold;
			margin-top: 30rpx;
			margin-left: 30rpx;
			">订单详情</view>

			<!-- 车辆服务 -->
			<view style="width: 90%;
			height: 120rpx;
			border-bottom: 5rpx solid whitesmoke;
			margin-top: 30rpx;
			margin-left: 30rpx;
			">
				<view style="
				display: flex;
				justify-content: space-between;">
					<view>车辆精洗</view>
					<view style="margin-top: 10rpx;">￥39.90</view>
				</view>
				<view style="
				display: flex;
				justify-content: space-between;">
					<view>车辆附加费用</view>
					<view>0</view>
				</view>
			</view>
			<!--   优惠   -->
			<view style="width: 90%;
			height: 120rpx;
			border-bottom: 5rpx solid whitesmoke;
			margin-top: 30rpx;
			margin-left: 30rpx;
			">
				<view style="
				display: flex;
				justify-content: space-between;">
					<view>原价</view>
					<view>￥59.90</view>
				</view>
				<view style="
				display: flex;
				justify-content: space-between;">
					<view>店家优惠</view>
					<view style="color: orangered;">-￥20</view>
				</view>
			</view>
			<!-- 优惠券 -->
			<view style="width: 90%;
			height: 80rpx;
			border-bottom: 10rpx solid whitesmoke;
			margin-top: 30rpx;
			margin-left: 30rpx;
			">
				<view style="
				display: flex;
				justify-content: space-between;">
					<view>优惠券</view>
					<view style="color: orangered;">-￥10</view>
				</view>
			</view>
			<!-- 支付金额 -->
			<view style="width: 90%;
			height: 80rpx;
			margin-top: 30rpx;
			margin-left: 30rpx;
			">
				<view style="
				display: flex;
				justify-content: space-between;">
					<view>支付金额</view>
					<view style="color: limegreen;">￥29.90</view>
				</view>
			</view>
		</view>
				<!--   底部  客服 -->
		<view class="box-dibu">
			<image src="/static/客服.png" mode=""></image>
			<view class="kefu">联系客服</view>
			<view class="zhifu">再来一单</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			
		}
	}
</script>

<style>
	.dingdan-wai {
		width: 93%;
		height: 580rpx;
		background-color: #fff;
		border-radius: 30rpx;
		margin: 0 auto;
	}



	.xinxi {
		display: flex;
		justify-content: space-between;
		border-bottom: 10rpx solid whitesmoke;
		height: 80rpx;
		margin: 30rpx;
	}

	.fuwu-3 view {
		margin-bottom: 20rpx;
	}
	.dingDanYangQing{
		width: 93%;
		height: 650rpx;
		background-color: #fff;
		border-radius: 30rpx;
		margin: 0 auto;
		margin-top: 30rpx;
		padding: 1rpx;
	}
	.box-dibu{
		position:fixed;
		bottom:0;
		width: 100%;
		margin-top: 150rpx;
		height: 100rpx;
		
		background-color: #fff;
	}
	.box-dibu image{
		width: 60rpx;
		height: 60rpx;
		float: left;
		margin: 30rpx;
	}
	.kefu{
		line-height: 100rpx;
		float: left;
	}
	.zhifu{
		width: 180rpx;
		height: 60rpx;
		background-color: #55aaff;
		color: #fff;
		text-align: center;
		line-height: 60rpx;
		float: right;
		border-radius: 15rpx;
		margin-right: 20rpx;
		margin-top: 20rpx;
		border-bottom: 5rpx solid whitesmoke;
	}
</style>